<template>
  <table class="table table-bordered table-stripped">
    <!-- 表格标题区域 -->
    <thead>
      <tr>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </tr>
    </thead>
    <!-- 表格主体区域 -->
    <tbody>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.goods_name }}</td>
        <td>{{ item.goods_price }}</td>
        <td>
          <div>
            <input
              v-gfocus
              @blur="(item.inputVisible = false), (newas = '')"
              @keyup.enter="addnews(index)"
              v-if="item.inputVisible"
              type="text"
              name=""
              id=""
              v-model="newas"
            />
            <button @click="item.inputVisible = true" v-else>+tag</button>
          </div>
          <span v-for="(item1, index) in item.tags" :key="index">
            {{ item1 }}
          </span>
        </td>
        <td>
          <button @click="remove(item.id)">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: "MyTable",
  async created() {
    const { data: res } = await this.$http.get("/api/goods");
    this.list = res.data;
  },
  data() {
    return {
      list: [],
      newas: "",
    };
  },
  methods: {
    remove(id) {
      this.list = this.list.filter((item) => item.id !== id);
    },
    addnews(index) {
      this.list[index].tags.push(this.newas);
      this.newas = "";
      this.list[index].inputVisible = false;
    },
  },
};
</script>

<style scoped lang="less">
.my-goods-list {
  .badge {
    margin-right: 5px;
  }
}
</style>
